<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂练习</title>
    <style>
div {
width: 400px;
margin: 20px auto;
text-align: center;
}
.form-group {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 20px;}
.captchadisplay{
            width: 40px;
            height: 20px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 2px;
            margin: 1rem 1;
            display: flex; 
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 4px;
            user-select: none;
            display: inline-flex; 
            overflow: hidden;
            opacity: 0.4;
}
label {
display: inline-block;
width: 80px;
text-align: right;
}
span {
color: blue;
}
.footer {
text-align: center;
}
.tip {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<div id="login">
<form action="data.html" method="post" enctype="multipart/form-data">
    <h4><span>欢迎注册会员</span></h4>
<div>
<label for="phone"><b>手机号码:</b></label>
<input type="tel" id="phone" name="phone" title="必填" placeholder="11位手机号" required>
<span style="color: red;">必填</span>
</div>
<div>
<label for="password"><b>创建密码:</b></label>
<input type="tel" id="password" name="password" title="必填" placeholder="8位密码" required>
<span style="color: red;">必填</span>
</div>
<div>
<label for="email"><b>注册邮箱:</b></label>
<input type="email" id="email" name="email" title="必填" placeholder="例如：**@*******" required>
<span style="color: red;">必填</span>
</div>
<div class="form-group">
        <label for="captchadisplay"><b>验证码:</b></label>
        <input type="text" id="captchaInput" placeholder="请输入验证码">
        <span class="captchadisplay" id="captchadisplay"></span>
        <button  onclick="refreshCaptcha()">刷新</button>
</div>

性别：
<input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female"> 女
<div>
生日:<input type="date"></div>
</div>
<div>
 <b>年龄：</b>
    <input type="text" name="age" id="age">
</div>
<div>
    <b>籍贯：</b>
<select name="籍贯" size="1" style="width: 85px;;">
    <option value="0">湖北</option>
</select>
<select style="width: 85px;">
    <option value="1">武汉</option>
</select>
<div>
    <b>个人学历：</b>
    <select name="sda" id="da" style="width: 140px;">
    <option value="0">大专</option>

    </select>
</div>
</div>
<div>
月薪:
<input type="range" id="score" name="score" min="0.0" max="10000.0" step="0.5" value="5000.0" >
<span id="msg"></span>
</div>
<div>
    <label>
        <input type="checkbox" value="run">跑步
    </label>
    <label >
        <input type="checkbox" value="swimming">游泳
    </label>
    <label>
        <input type="checkbox" value="sing">唱歌
    </label>
</div>
<div>
    个人照片：<input type="file" name="photo">
</div>
<div>
    个人简历：<textarea name="intro" cols="50" rows="10">请填写个人简历</textarea>
</div>
<div class="footer">
<div>
<input type="submit" value="提交" />
<input type="reset" value="重填" />
</div>
</div>
<div class="tip">
<p>说明：用户名和密码必填</p>
</div>
</form>
</div
</body>
</html>
<script>
var msg = document.getElementById("msg"); // 根据id值找到span元素
window.onload = function () { 
msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
}
document.getElementById("score").onchange = function () { 
msg.innerHTML = this.value; 
}
window.onload = function() {
            refreshCaptcha();
        }
function refreshCaptcha() {  
  const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";  
  let captcha = ""; 
  for (let i = 0; i < 4; i++) {  
    const randomIndex = Math.floor(Math.random() * chars.length); 
    captcha += chars[randomIndex];  
  } 
  currentCaptcha = captcha;
        const captchaDisplay = document.getElementById("captchadisplay");
        captchaDisplay.innerHTML = captcha;
} 
</script>